<template>
  <div v-loading="fullscreenLoading" element-loading-background="rgba(0, 0, 0, 0.3)" class="SSjylayout">
    <div class="ssjyheader">
      <el-form ref="ruleForm" :model="ruleForm" label-width="auto" label-position="left">
        <!-- <p class="medssjy_top">
          <el-radio-group v-model="ruleForm.SearchNew" @change="getData">
            <el-radio label="1"> 雨量站 </el-radio>
            <el-radio label="2"> 气象站 </el-radio>
          </el-radio-group>
        </p> -->
        <p class="medssjy">
          <el-radio-group v-model="ruleForm.TimeRadio" @change="TimeRadiobtn">
            <el-radio label="1"> 最近1h </el-radio>
            <el-radio label="6"> 最近6h </el-radio>
            <el-radio label="12"> 最近12h </el-radio>
            <el-radio label="24"> 最近24h </el-radio>
            <!-- <el-radio label="自定义"> 自定义 </el-radio> -->
          </el-radio-group>
        </p>
        <div style="padding-left:6px">
          <div
            style="font-size: 14px;font-family: Source Han Sans CN;font-weight: 400;color: #FFFFFF;opacity: 0.8;text-shadow: 0px 3px 2px rgba(0,14,17,0.19);margin-bottom:6px">
            降雨时段</div>
          <el-date-picker v-model="ruleForm.TimeRain" type="datetimerange" start-placeholder="开始日期" range-separator="至"
            end-placeholder="结束日期" style="width: 99%" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
            :default-time="[timebeg, timeend]" @focus="focusTime" prefix-icon="el-icon-date"  @change="selectTime(ruleForm.TimeRain)"/>
          <!-- <span class="sechbtn" @click.stop="selectTime(ruleForm.TimeRain)"><i class="el-icon-search"></i></span> -->
        </div>
      </el-form>
    </div>
    <div class="JYLseftBox">
      <div class="collapse_table">
        <template v-if="dataList.length > 0">
          <el-collapse v-model="isActive" accordion>
            <el-collapse-item v-for="(item, index) in dataList" :key="index" :class="'colorLevel' + item.level"
              :name="index">
              <template slot="title">
                {{ item.magnitude }}
              </template>
              <div class="titleList" style="margin-top: 1px;">
                <span>站点</span>
                <span>累计雨量<br>(mm)</span>
                <span>未来2h雨量<br>(mm)</span>
                <!-- <span>前3天雨量<br>(mm)</span> -->
              </div>
              <div class="stationLst">
                <ul>
                  <template v-if="item.stationLst.length > 0">
                    <li v-for="(stationLstItrm, indexStationLst) in item.stationLst" :key="indexStationLst"
                      :class="{ tableBgList: selectNum == item.level + '-' + indexStationLst }"
                      @click="tableList(stationLstItrm, item.level + '-' + indexStationLst)">
                      <span>{{ stationLstItrm.stnm?stationLstItrm.stnm:'--' }}</span>
                      <span>{{ stationLstItrm.p?stationLstItrm.p:0 }}</span>
                      <span>{{ stationLstItrm.h3?stationLstItrm.h3:0 }}</span>
                      <!-- <span>{{ stationLstItrm.p7 || 0 }}</span> -->
                    </li>
                  </template>
                  <template v-else>
                    <div class="noDataLists">暂无数据</div>
                  </template>
                </ul>
              </div>
            </el-collapse-item>
          </el-collapse>
        </template>
        <template v-else>
          <div class="noDataLists">暂无数据</div>
        </template>
      </div>
    </div>

    <div class="Statistvics_box">
      <div>&nbsp;&nbsp;站点数
        <!-- <span>0</span> -->
        <span v-for="i in StatistvicsNum" :key="i">{{ i }}</span>个
      </div>
      <div class="Statistvics">
        <ul>
          <li v-for="(item, index) in StatistvicsList" :key="index" :class="` ${index < 4 ? 'borderBottom' : ''}`">
            <div :class="`${index == 1 || index == 2 || index == 3 || index == 5 || index == 6 ? 'boderLeft' : ''}`">
              <div style="margin-left: 10px;">
                <div>{{ item.key }}</div>
                <div>{{ item.value }}</div>
              </div>
            </div>
          </li>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import {
  GetBasinStationRainList
} from '@/api/xuna.js'
import {
  mapGetters
} from 'vuex'
// import weather from '@/map/cesium/mixins/weather'
export default {
  // mixins: [weather],
  data() {
    return {
      selectNum: '-1',
      timebeg: this.$moment(this.$store.getters.startTimeCommon).format('HH:mm:ss'),
      timeend: this.$moment(this.$store.getters.endTimeCommon).format('HH:mm:ss'),
      ruleForm: {
        SearchNew: '1',
        TimeRadio: '',
        strBegin: this.$store.getters.startTimeCommon,
        strEnd: this.$store.getters.endTimeCommon,
        TimeRain: [this.$store.getters.startTimeCommon, this.$store.getters.endTimeCommon],
        limit: '10',
        page: '1'
      },
      dataList: [], // 数据列表
      StatistvicsList: [], // 统计
      StatistvicsNum: [],
      fullscreenLoading: false,
      isActive: 0
    }
  },
  computed: {
    ...mapGetters({
      basin: 'basin'
    })
  },
  watch: {
    'basin': {
      immediate: true,
      deep: true,
      handler(val) {
        this.ruleForm.WSWSCD = val
        this.getData()
      }
    }

  },
  beforeDestroy() {
    var player = this.$store.getters.playerParams
    player.show = false
    player.currIndex = 0
    player.times = []
    this.$store.dispatch('playerParams', player)
    GetBasinStationRainList.canceler('cancel request') // 取消
    this.$store.dispatch('mapLoadingText', [])
    this.$eventBus.$emit('EB_YB_SCJY', false)
    this.$eventBus.$emit('EB_YB_Ladar', '重置')
    this.$eventBus.$off('FZCINFO')
  },
  created() {
  },
  mounted() {
    this.$eventBus.$on('FZCINFO', res => {
      this.$store.getters.dlgParams.params = {
        'Ewcode': res.ADCD,
        'strBegin': this.ruleForm.strBegin,
        'strEnd': this.ruleForm.strEnd
      }
      this.$store.getters.dlgParams.name = 'FZCCuZINFO'
    })
  },
  methods: {
    tableList(item, index) {
      this.selectNum = index
      item.strBegin = this.ruleForm.TimeRain[0]
      item.strEnd = this.ruleForm.TimeRain[1]
      item.Step = this.ruleForm.TimeRadio === '自定义' ? '' : this.ruleForm.TimeRadio
      this.$eventBus.$emit('flyToRealRain', item.stcd)
    },
    focusTime() {
      this.ruleForm.TimeRadio = '自定义'
    },
    selectTime(val) { // 自定义时间
      if (val) {
        this.ruleForm.strBegin = val[0]
        this.ruleForm.strEnd = val[1]
        this.ruleForm.TimeRain = val
        this.$store.dispatch('startTimeCommon', val[0])
        this.$store.dispatch('endTimeCommon', val[1])
        this.getData()
      } else {
        this.ruleForm.strBegin = ''
        this.ruleForm.strEnd = ''
      }
    },
    TimeRadiobtn(val) {
      this.ruleForm.TimeRadio = val
      if (val !== '自定义') {
        const timeT = this.$moment(this.ruleForm.strEnd).subtract(val, 'hour').format('YYYY-MM-DD HH:mm')
        this.ruleForm.strBegin = timeT
        this.selectTime([timeT, this.ruleForm.strEnd])
      } else {
        this.getData()
      }
    },
    getData() { // 列表
      this.fullscreenLoading = true
      this.$store.commit('mapLoadingPush', '请求降雨数据...')
      const param = {
        // SearchNew: this.ruleForm.SearchNew == 1 ? false : true,
        dtBegin: this.ruleForm.strBegin,
        dtEnd: this.ruleForm.strEnd,
        wswscd: this.ruleForm.WSWSCD,
        limit: this.ruleForm.limit,
        page: this.ruleForm.page
      }

      this.apiGetBasinStationRainList = GetBasinStationRainList(param).then((res) => {
        this.$eventBus.$emit('GetRadarParams', param)
        this.fullscreenLoading = false
        this.$store.commit('mapLoadingDel', '请求降雨数据...')
        if (res.isSuccess) {
          this.dataList = res.data.data.filter(function (item, index) {
            return item.stationCount > 0
          })

          this.StatistvicsList = res.data.stationNumList
          let zhanNum = res.data.stationCount ? res.data.stationCount : '0';
          this.StatistvicsNum = (zhanNum + '').slice('');
          this.selectNum = -1
          if (this.ruleForm.SearchNew == 1) {
            this.$eventBus.$emit('EB_YB_SCJY', true, res.data, param)
          } else {
            this.$eventBus.$emit('EB_YB_SCJY1', true, res.data, param)
          }

          // this.creatRealRain(res.data, param)
        } else {
          this.$message.error(res.message)
          this.$eventBus.$emit('EB_YB_SCJY', false)
          this.$eventBus.$emit('EB_YB_SCJY1', false)
          // this.clearRain()
        }
      })
    },
    getImgUrl(i) {
      return require('@/assets/newimg/RainIcon' + i + '.png')
    }
  }
}
</script>
<style lang="less" scoped>
.medssjy {
  .el-radio-group {
    width: 100%;
    display: flex;
    justify-content: space-around;

    /deep/.el-radio {
      display: inline-block;
      text-align: center;
    }

    label {
      width: 21%;
      padding-top: 5px;
      padding-bottom: 5px;

      /deep/.el-radio__label {
        padding-left: 1px;
        letter-spacing: -1px;
        vertical-align: bottom;
      }

      /deep/.el-radio__input {
        height: 0.875rem;
      }
    }
  }
}

.medssjy_top {
  .el-radio-group {
    width: 100%;
    display: flex;

    /deep/.el-radio {
      display: inline-block;
      text-align: center;
    }

    label {
      width: 21%;
      padding-top: 5px;
      padding-bottom: 5px;

      /deep/.el-radio__label {
        padding-left: 1px;
        letter-spacing: -1px;
        vertical-align: bottom;
      }

      /deep/.el-radio__input {
        height: 0.875rem;
      }
    }
  }
}

.SSjylayout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .ssjyheader {
    height: 120px;
    margin-bottom: 10px;

    // padding: 0 7px;
    p {
      margin: 0px 0 7px;
    }
  }

  .JYLseftBox {
    height: calc(100% - 237.61px);
    padding: 8px 0px 8px 6px;
    overflow-y: auto;
    border-top: 1px solid #3F72AA;

    .stationLst ul li {
      cursor: pointer;
      border: none;
      margin-bottom: 3px;
    }

    .collapse_table {
      flex: 1;
      height: 100%;
    }
  }

  // .el-collapse-item {
  // 	// background: #172b42;
  // 	// border-bottom: 1px solid rgba(3, 34, 55, 0.61);
  // 	// text-indent: 2px;
  // }

  .Statistvics_box {
    height: max-content;
    padding-top: 10px;
    border-top: 1px solid #3F72AA;
    ;

    &>:nth-child(1) {
      font-size: 14px;
      line-height: 32px;

      &>span {
        display: inline-block;
        font-size: 24px;
        line-height: 32px;
        font-family: 'Number';
        background: url(../../../../assets/newimg/areaNumber.png) no-repeat;
        background-size: 100% 100%;
        padding: 4px 8px;
        margin: 0 4px;
      }
    }
  }

  .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }

  .Statistvics {
    padding: 10px 5px 0px;

    ul {
      box-sizing: border-box;

      width: 100%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      background: rgba(0, 165, 233, 0.2);
      padding: 0 10px;

      li {
        width: 25%;
        text-align: left;
        box-sizing: border-box;

        &>div {
          &>div {
            background: url(../../../../assets/newimg/矩形.png) no-repeat left center;
            background-size: auto 66%;

            &>:nth-child(1) {
              font-size: 13px;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #A5C2D8;
              margin-top: 10px;
              text-indent: 10px;
            }

            &>:nth-child(2) {
              font-size: 18px;
              color: #FFFFFF;
              font-family: 'Number';
              margin-bottom: 10px;
              text-indent: 10px;
            }
          }

        }
      }

      .boderLeft {
        border-left: 1px solid #3F72AA;
      }

      .borderBottom {
        border-bottom: 1px solid #3F72AA;
      }
    }
  }

  .titleList {
    margin-bottom: 3px;

    span {
      font-size: 14px;
      font-weight: bold;
    }
  }
}

.stationLst ul li span {
  color: white !important;
  font-weight: bold;
}

.sechbtn {
  display: inline-block;
  width: 14%;
  height: 33px;
  margin-left: 7px;
  border-radius: 6px;
  background-color: #1E73DC;
  font-size: 18px;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
  line-height: 34px;
  cursor: pointer;
}

/deep/ .el-date-editor {
  border: solid 1px #1E73DC;
}
</style>
